<template>
	<view class="content">
		<view>
			身份证号
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="idCard" placeholder="请输入身份证号" />
		<view @tap="go" class="btn"><button type="default" style="background-color:#fcd700;">查询</button></view>
		<view class="tip" v-if="Data">
			<view style="display: flex;align-items: center;">
				<text class="text">犬只照片:</text>
				<image style="width: 200upx;height: 200upx;" :src="Data.dogAvatar" mode=""></image>
			</view>
			<view>
				<text class="text">犬主名称:</text>
				{{ Data.NAME }}
			</view>
			<view style="display: flex;align-items: center;">
				<text class="text">手机号:</text>
				{{ Data.phone }}
				<button @tap="faMa" v-show="isFa" style="font-size: 26upx;width: 200upx;height: 60upx;line-height: 60upx;" type="primary">发送验证码</button>
				<button v-show="!isFa" style="font-size: 26upx;width: 200upx;height: 60upx;line-height: 60upx;" disabled>{{ miao }}秒</button>
			</view>
			<view style="display: flex;align-items: center;">
				<text class="text">验证码：</text>
				<input style="width:30%;display: inline-block;" type="number" v-model="ma" placeholder="请输入验证码" />
			</view>
			<button @tap="guan" type="primary" style="background-color:#fcd700;padding: 0 60upx;margin-top: 100upx;">绑定</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import CHONG from '../../static/js/function.js';
export default {
	computed: mapState(['URL', 'TOKEN']),
	data() {
		return {
			idCard: '',
			Data: null,
			isFa: true,
			miao: 59,
			ma: '',
			bizId: ''
		};
	},
	methods: {
		...mapMutations(['TO_UPDATE']),
		go() {
			console.log(this.URL);
			let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

			if (!this.idCard) {
				CHONG.tip('请填写身份证号', 1);
				return;
			} else if (!idcardReg.test(this.idCard)) {
				CHONG.tip('请填写正确格式的身份证号', 1);
				return;
			}
			CHONG.tip('查询中', 0);
			let data = {
				userIdNo: this.idCard
			};

			uni.request({
				url: this.URL + 'getUserById',
				data: data,
				success: res => {
					console.log(res.data);
					uni.hideLoading();
					if (res.data.success) {
						let json = res.data.data[0];
						console.log('绑定信息');
						console.log(json);
						this.Data = json;
					} else {
						CHONG.tip('查询失败，请稍后再试');
					}
				}
			});
		},
		guan() {
			if (!this.ma) {
				CHONG.tip('请输入验证码');
				return;
			} else if (this.ma.length !== 4) {
				CHONG.tip('验证码不正确');
				return;
			} else {
				uni.request({
					url: this.URL + 'Msgchecked',
					data: {
						bizId: this.bizId,
						telephone:this.Data.phone,
						checkNo: this.ma
					},
					success: res => {
						console.log('提交验证码了');
						console.log(res.data);
						if (res.data.success) {
							this.bangding();
							// this.Data = null;
							// this.idCard = '';
						} else {
							CHONG.tip('验证码不正确');
						}
					}
				});
			}
		},
		bangding() {
			uni.request({
				url: this.URL + 'bindWx',
				data: {
					wxid: this.TOKEN,
					userIdNo: this.idCard
				},
				success: res => {
					console.log(res.data);
					if (res.data.success) {
						CHONG.tip(res.data.msg);
						this.TO_UPDATE(true);
						setTimeout(() => {
							uni.navigateBack({});
						}, 1500);
					} else {
						CHONG.tip('网络错误，请稍后再试');
					}
				}
			});
		},
		faMa() {
			this.isFa = false;
			let timer = setInterval(() => {
				this.miao--;
				if (this.miao === 0) {
					clearInterval(timer);
					this.isFa = true;
					this.miao = 59;
				}
			}, 1000);
			uni.request({
				url: this.URL + 'Sendchecked',
				data: {
					telephone: this.Data.phone
				},
				success: res => {
					console.log('返回的验证码');
					console.log(res.data);
					if (res.data.success) {
						this.bizId = res.data.data[0].bizId;
					} else {
						CHONG.tip('网路错误，请稍后再试');
					}
				}
			});
		}
	},
	onLoad() {
		console.log(this.TOKEN);
	}
};
</script>

<style lang="scss">
.content {
	font-size: 26upx;
	padding: 20upx;

	input {
		color: $chong-text-color;
		font-size: 24upx;
		margin: 10upx 0;
		padding: 4upx 20upx;

		border: {
			radius: 10upx;
			style: solid;
			width: 1upx;
			color: rgba($chong-text-color, 0.2);
		}

		background: white;
	}

	.btn {
		padding: 50upx 0;
		margin: 0 140upx;
	}

	.huang {
		color: $chong-iconbg-color;
	}

	.tip {
		width: 690upx;
		min-height: 500upx;
		box-sizing: border-box;
		padding: 50upx;
		display: flex;
		flex-direction: column;
		margin: 20upx;
		font-size: 36upx;
		border-radius: 20upx;

		.text {
			color: #888;
			padding-right: 10upx;
		}
	}
}
</style>
